import React, { useEffect, useState } from "react";
import { EyeInvisibleOutlined, EyeTwoTone, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Flex, Form, Input, Typography } from "antd";
import "./index.scss";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { storeLogin } from "@/store/modules/user.jsx";

const { Title, Text } = Typography;
export default function Login() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [showPassword, setShowPassword] = useState(false);
  const [form] = Form.useForm();
  const handleLogin = async () => {
    await dispatch(storeLogin(form.getFieldValue()));
    // navigate("/bases");
  };
  useEffect(() => {
    const timer = setTimeout(() => {
      document.querySelector(".login-container")?.classList.add("loaded");
    }, 300);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="login-wrapper">
      {/* 背景装饰 */}
      <div className="login-bg">
        <div className="bg-pattern"></div>
        <div className="bg-gradient"></div>
      </div>

      <div className="login-container">
        <div className="login-form-wrapper">
          {/* 登录头部 */}
          <div className="login-header">
            <Title level={1} className="login-title">
              <span className="title-gradient">欢迎使用React框架</span>
            </Title>
            <Text className="login-subtitle">请登录您的账户以继续使用</Text>
          </div>

          {/* 登录表单卡片 */}
          <Card className="login-card">
            <Form
              form={form}
              name="login-form"
              layout="vertical"
              onFinish={handleLogin}
              initialValues={{
                remember: false,
                username: "admin",
                password: "123456",
              }}
            >
              {/* 用户名输入 */}
              <Form.Item
                name="username"
                label="用户名"
                rules={[
                  {
                    required: true,
                    message: "请输入用户名",
                  },
                ]}
                className="login-form-item"
              >
                <Input
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="请输入用户名"
                  className="login-input"
                  autoComplete="username"
                />
              </Form.Item>

              {/* 密码输入 */}
              <Form.Item
                name="password"
                label="密码"
                rules={[
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ]}
                className="login-form-item"
              >
                <Input.Password
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  placeholder="请输入密码"
                  className="login-input"
                  autoComplete="current-password"
                  iconRender={(visible) => (
                    <span onClick={() => setShowPassword(!showPassword)}>
                      {visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
                    </span>
                  )}
                  visibilityToggle={false}
                  type={showPassword ? "text" : "password"}
                />
              </Form.Item>

              {/* 记住我和忘记密码选项 */}
              <Form.Item>
                <Flex justify="space-between" align="center">
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住密码</Checkbox>
                  </Form.Item>
                  <a>忘记密码</a>
                </Flex>
              </Form.Item>

              {/* 登录按钮 */}
              <Form.Item className="login-form-item">
                <Button type="primary" htmlType="submit" className="login-button" size="large">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </div>
  );
}
